<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>大华银行邀您赛龙舟了！</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Cache-Control" content="no-cache" />
        <meta http-equiv="Cache-Control" content="max-age=0" />
        <meta name="HandheldFriendly" content="true" />
        <meta name="viewport" content="width=320.1, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

        <script type="text/javascript">
            const siteUrl = "./",
                musicMp3 = "media/bgm.mp3"
        </script>

        <link href="css/music.css" rel="stylesheet" type="text/css" />
        <link href="css/animate.css" rel="stylesheet" type="text/css" />
        <link href="css/common.css" rel="stylesheet" type="text/css" />
    </head>
	<body>

        <div class="pop-bg">
            <div class="pop-box" id="rule">
                <div class="pop-box-content">
                    <p><b>游戏规则正文：</b></p>
                    <p>端午佳节到，赛龙舟，赢好礼！您需左右点击手机屏幕下方左右键控制龙舟方向，在最短时间内躲避河中障碍，吃到奖励加速道具，冲线即可完成比赛。游戏排行榜用时最快的前30名玩家，将获得电子卷好礼。游戏次数不限，快来挑战吧！</p>
                    <p><b>活动免责声明正文:</b></p>
                    <p>本游戏环节纯属虚构。排行榜前30名用户，由大华银行中国微信后台发送给您中奖信息，以及相关奖品（电子券序列号兑换码）。每人限领一次奖品。</p>
                    <p>在法律法规及监管规定所允许的范围内，大华银行（中国）有限公司有权对本次活动的规则进行解释。</p>
                    <p>在法律法规及监管规定所允许的范围内，大华银行（中国）有限公司保留对本次活动规则进行调整的权利（包括但不限于活动时间、参与条件与方式等）的权利。本次活动规则如有变动，将在“大华银行中国”公众号予以公告，恕不另行通知。请您关注“大华银行中国” 公众号，以便及时收到与本次活动相关的信息。</p>
                </div>
                <div class="pop-confirm-btn" id="ruleClose"></div>
            </div>

            <div class="pop-box" id="rank">
                <div class="pop-close"></div>
                <img class="rank-title" src="images/pop_rank_title.png" alt="" />
                <div class="pop-rank-item-head flex">
                    <div class="pop-rank-item">名次</div>
                    <div class="pop-rank-item">微信头像</div>
                    <div class="pop-rank-item">昵称</div>
                    <div class="pop-rank-item">用时(秒)</div>
                </div>
                <div class="pop-rank-box">
                    <div class="pop-rank-item-box flex">
                        <div class="pop-rank-item">1</div>
                        <div class="pop-rank-item"><img src="images/user_demo_img.png" alt="" /></div>
                        <div class="pop-rank-item">maxmaxmaxmaxmaxmax</div>
                        <div class="pop-rank-item">25.32</div>
                    </div>
                    <div class="pop-rank-item-box flex">
                        <div class="pop-rank-item">2</div>
                        <div class="pop-rank-item"><img src="images/user_demo_img.png" alt="" /></div>
                        <div class="pop-rank-item">max</div>
                        <div class="pop-rank-item">25.32</div>
                    </div>
                    <div class="pop-rank-item-box flex">
                        <div class="pop-rank-item">3</div>
                        <div class="pop-rank-item"><img src="images/user_demo_img.png" alt="" /></div>
                        <div class="pop-rank-item">max</div>
                        <div class="pop-rank-item">25.32</div>
                    </div>
                    <div class="pop-rank-item-box flex">
                        <div class="pop-rank-item">4</div>
                        <div class="pop-rank-item"><img src="images/user_demo_img.png" alt="" /></div>
                        <div class="pop-rank-item">max</div>
                        <div class="pop-rank-item">25.32</div>
                    </div>
                    <div class="pop-rank-item-box flex">
                        <div class="pop-rank-item">5</div>
                        <div class="pop-rank-item"><img src="images/user_demo_img.png" alt="" /></div>
                        <div class="pop-rank-item">max</div>
                        <div class="pop-rank-item">25.32</div>
                    </div>
                    <div class="pop-rank-item-box flex">
                        <div class="pop-rank-item">6</div>
                        <div class="pop-rank-item"><img src="images/user_demo_img.png" alt="" /></div>
                        <div class="pop-rank-item">max</div>
                        <div class="pop-rank-item">25.32</div>
                    </div>
                    <div class="pop-rank-item-box flex">
                        <div class="pop-rank-item">7</div>
                        <div class="pop-rank-item"><img src="images/user_demo_img.png" alt="" /></div>
                        <div class="pop-rank-item">max</div>
                        <div class="pop-rank-item">25.32</div>
                    </div>
                    <div class="pop-rank-item-box flex">
                        <div class="pop-rank-item">8</div>
                        <div class="pop-rank-item"><img src="images/user_demo_img.png" alt="" /></div>
                        <div class="pop-rank-item">max</div>
                        <div class="pop-rank-item">25.32</div>
                    </div>
                    <div class="pop-rank-item-box flex">
                        <div class="pop-rank-item">9</div>
                        <div class="pop-rank-item"><img src="images/user_demo_img.png" alt="" /></div>
                        <div class="pop-rank-item">max</div>
                        <div class="pop-rank-item">25.32</div>
                    </div>
                    <div class="pop-rank-item-box flex">
                        <div class="pop-rank-item">10</div>
                        <div class="pop-rank-item"><img src="images/user_demo_img.png" alt="" /></div>
                        <div class="pop-rank-item">max</div>
                        <div class="pop-rank-item">25.32</div>
                    </div>
                </div>
                <img class="rank-close" src="images/rank_close_icon.png" alt="" />
            </div>

            <div class="pop-box game-pop success" id="failed">
                <p>哎呀！划慢了，<br />再接再厉吧！</p>
                <div class="pop-btns-box failed flex">
                    <img id="popPlayAgain" src="images/pop_play_again.png" alt="" />
                    <img id="popGoLast" src="images/pop_goto_last_btn.png" alt="" />
                </div>
            </div>

            <div class="pop-box game-pop" id="noticePop">
                <p>请阅读并勾选同意<br />游戏规则及免责条款</p>
            </div>

            <div class="pop-box game-pop success" id="success">
                <p>百舸争流，属你最牛！<br />用时为<b id="score">27:40</b></p>
                <div class="pop-btns-box flex">
                    <img id="popConfirm" src="images/pop_confirm_btn.png" alt="" />
                    <img id="popRank" src="images/pop_rank_btn.png" alt="" />
                </div>
            </div>

            <div class="pop-box game-pop" id="tips">
                <p>长按龙舟左右移动<br />多吃粽子，少碰岩石<br />30秒内划到终点<br />即为闯关成功</p>
            </div>

            <div class="pop-box game-timer three" id="gameStartTimer"></div>
        </div>

        <div class="page index" id="index">
            <img class="logo" src="images/logo.png" alt="" />
            <img class="slogan" src="images/slogan.png" alt="" />
            <div class="rank-btn"></div>
            <div class="index-game-btn animated pulse slow11 infinite"></div>
            <div class="index-notice flex">
                <input type="checkbox" id="notice" />
                <label for="#notice"></label>
                <p>我已阅读并同意游戏规则和活动声明</p>
            </div>
        </div>

        <div class="page game">
            <div class="game-bg-yn animated fadeIn"></div>
            <div class="timer-box">00:00</div>
            <div class="country-label china animated fadeIn"></div>
            <img class="finish" src="images/finish_point_img.png" alt="" />
            <img class="game-success-flower animated bounceIn" src="images/game_over_success_flower.png" width="100%" alt="" />
            <img class="game-start-cloud animated slideInRight" src="images/game_start_cloud.png" alt="" />
            <div class="boat wait animated slideInUp"><div class="boat-hit-box"></div></div>
        </div>

        <div class="page index" id="res">
            <img class="logo" src="images/logo.png" alt="" />
            <img class="slogan" src="images/slogan.png" alt="" />
            <div class="rank-btn"></div>
            <div class="res-btns-box flex">
                <div class="button" id="poster"></div>
                <div class="button" id="again"></div>
            </div>
            <div class="index-bottom flex"><img src="images/logo1.png" alt="" /></div>
        </div>

        <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
        <script type="text/javascript" src="js/howler.min.js"></script>
        <script type="text/javascript" src="js/music.js"></script>
        <script type="text/javascript">
            // 结果页
            $('#poster').click(function (e) {
                window.location.href = 'poster.html';
            })

            $('#again').click(function (e) {
                $('#res').hide();
                $('#index').show();
            })

            // 游戏相关start
            // 时间显示调整相关start
            let soundSpeedUp = new Howl({src: ['media/speedUp.mp3']});
            let soundHit = new Howl({src: ['media/hit.mp3']});
            let soundWin = new Howl({src: ['media/win.mp3']});

            function padZero (num, targetLength = 2) {
                let str = num + ''

                while (str.length < targetLength) {
                    str = '0' + str
                }

                return str
            }
            function parseTime (time) {
                const SECOND = 1000
                const MINUTE = 60 * SECOND
                const HOUR = 60 * MINUTE

                const minutes = Math.floor((time % HOUR) / MINUTE)
                const seconds = Math.floor((time % MINUTE) / SECOND)
                const milliseconds = Math.floor(time % SECOND)

                return {
                    total: time,
                    minutes,
                    seconds,
                    milliseconds,
                }
            }
            function parseFormat (format, currentTime) {
                let { seconds, milliseconds } = currentTime

                if (format.includes('ss')) {
                    format = format.replace('ss', padZero(seconds))
                } else {
                    milliseconds += seconds * 1000
                }

                if (format.includes('S')) {
                    const ms = padZero(milliseconds, 3)

                    if (format.includes('SSS')) {
                        format = format.replace('SSS', ms)
                    } else if (format.includes('SS')) {
                        format = format.replace('SS', ms.slice(0, 2))
                    } else {
                        format = format.replace('S', ms.charAt(0))
                    }
                }

                return format
            }
            // 时间显示调整相关end

            // 计时并显示
            const render = (time) => {
                time = parseFormat('ss:SS', parseTime(time));
                //console.log(time);
                $('.timer-box').html(time);
            }

            // 游戏主控fps
            //let rafId;
            let fps = 60, now, then = Date.now(), interval = 1000 / fps, delta, frame, startTime;
            function tick(timestamp) {
                window.cancelAnimationFrame(frame);
                frame = window.requestAnimationFrame(tick);
                now = Date.now();
                delta = now - then;
                if (delta > interval) {
                    then = now - (delta % interval);
                    if (parseInt(parseFormat('ss',parseTime(timestamp - startTime))) >= 30) {
                        // 游戏时间达到30秒，游戏结束
                        window.cancelAnimationFrame(frame);
                        $('.timer-box').html('30:00');
                        gameOver('failed');
                    }else {
                        render(timestamp - startTime);
                        gameRound();
                    }
                }
            }

            // const useCountUp = () => {
            //     let startTime;
            //
            //     const step = (timestamp) => {
            //         //console.log('timestamp', timestamp)
            //         if (parseInt(parseFormat('ss',parseTime(timestamp - startTime))) >= 30) {
            //             // 游戏时间达到30秒，游戏结束
            //             window.cancelAnimationFrame(rafId);
            //             $('.timer-box').html('30:00');
            //             gameOver('failed');
            //         }else {
            //             render(timestamp - startTime);
            //             gameRound();
            //             rafId = window.requestAnimationFrame(step);
            //         }
            //     }
            //     const start = () => {
            //         startTime = performance.now()
            //         rafId = window.requestAnimationFrame(step);
            //     }
            //     return {
            //         start,
            //     }
            // }
            //
            // const { start } = useCountUp();

            // 游戏结束
            let gameOverConfirm = false;
            function gameOver(str) {
                document.body.removeEventListener('touchstart',touchStart);
                document.body.removeEventListener('touchend',touchEnd);
                document.body.removeEventListener('touchmove',touchMove);

                gameOverConfirm = true;
                for (let i=0;i<$('.game_move_mountain').length;i++) {
                    $('.game_move_mountain').eq(i).stop(true);
                }
                // for (let j=0;j<$('.game-item').length;j++) {
                //     $('.game-item').eq(j).stop(true);
                // }
                $('.game-item').remove();
                $('.boat').addClass('wait');
                if (str === 'failed') {
                    $('.finish').stop(true);
                    $('.pop-bg').addClass('show');
                    $('#failed').show();
                }
                if (str === 'success') {
                    soundWin.play();
                    $('.game-success-flower').show();
                    setTimeout(function () {
                        $('.game-success-flower').removeClass('bounceIn');
                        $('.game-success-flower').addClass('swing');
                        setTimeout(function () {
                            $('#score').html($('.timer-box').html());
                            $('.pop-bg').addClass('show');
                            $('#success').show();
                        },500);
                    },500);
                }
            }

            // 生成终点线
            function addFinishPoint() {
                $('.finish').show();
                $('.finish').animate({
                    'top': '60%',
                }, {
                    duration: 1000,
                    easing: 'linear',
                    complete: function () {
                        window.cancelAnimationFrame(frame);
                        gameOver('success');
                    }
                })
            }

            // 生成左右风景
            let moveX = '';
            function addMountainItem(position) {
                itemId ++;
                //console.log(itemId);
                if (itemId === 60) {
                    addFinishPoint();
                }
                if (itemId === 46) {
                    moveX = '-50%';
                    $('.country-label').removeClass('xjp');
                    $('.country-label').addClass('yin');
                    $('.game').append('<img id="'+ itemId +'" class="game_move_mountain yin right" src="images/game_move_landmark_yin.png" alt="" />');
                }else if (itemId === 39) {
                    moveX = '-50%';
                    $('.country-label').removeClass('ml');
                    $('.country-label').addClass('xjp');
                    $('.game').append('<img id="'+ itemId +'" class="game_move_mountain xjp left" src="images/game_move_landmark_xjp.png" alt="" />');
                }else if (itemId === 32) {
                    moveX = '-70%';
                    $('.country-label').removeClass('tai');
                    $('.country-label').addClass('ml');
                    $('.game').append('<img id="'+ itemId +'" class="game_move_mountain ml right" src="images/game_move_landmark_ml.png" alt="" />');
                }else if (itemId === 27) {
                    moveX = '-50%';
                    $('.game').append('<img id="'+ itemId +'" class="game_move_mountain tai left" src="images/game_move_landmark_tai.png" alt="" />');
                }else if (itemId === 21) {
                    $('.game-bg-yn').addClass('fadeOut');
                    moveX = '-50%';
                    $('.country-label').removeClass('yn');
                    $('.country-label').addClass('tai');
                    if (Math.round(Math.random()) === 0) {
                        $('.game').append('<img id="'+ itemId +'" class="game_move_mountain one '+ position +'" src="images/game_move_mountain1.png" alt="" />');
                    }else{
                        $('.game').append('<img id="'+ itemId +'" class="game_move_mountain two '+ position +'" src="images/game_move_mountain2.png" alt="" />');
                    }
                }else if (itemId >= 13 && itemId < 21) {
                    $('.country-label').addClass('yn');
                    $('.game-bg-yn').show();
                    moveX = '-100%';
                    $('.game').append('<img id="'+ itemId +'" class="game_move_mountain yn '+ position +'" src="images/game_move_mountain_yn.png" alt="" />');
                }else if (itemId === 6) {
                    moveX = '-70%';
                    $('.game').append('<img id="'+ itemId +'" class="game_move_mountain sh right" src="images/game_move_landmark_sh.png" alt="" />');
                } else {
                    moveX = '-50%';
                    if (Math.round(Math.random()) === 0) {
                        $('.game').append('<img id="'+ itemId +'" class="game_move_mountain one '+ position +'" src="images/game_move_mountain1.png" alt="" />');
                    }else{
                        $('.game').append('<img id="'+ itemId +'" class="game_move_mountain two '+ position +'" src="images/game_move_mountain2.png" alt="" />');
                    }
                }
                if (position === 'left') {
                    $('#'+itemId).animate({
                        'left': moveX,
                        'top': '80%'
                    },{
                        duration: speed,
                        easing: 'linear',
                        complete: function (e) {
                            $(this).remove();
                        }
                    })
                }else {
                    $('#'+itemId).animate({
                        'right': moveX,
                        'top': '80%'
                    },{
                        duration: speed,
                        easing: 'linear',
                        complete: function (e) {
                            $(this).remove();
                        }
                    })
                    return;
                }
                addMountainItem('right');
            }

            // 生成游戏道具
            let gameItemId = 0, randomBadType, randomPosition, itemPosition, itemMoveX;
            function addGameItem() {
                randomPosition = Math.ceil(Math.random()*3);
                randomBadType = Math.ceil(Math.random()*3);
                gameItemId ++;
                switch (randomPosition) {
                    case 1:
                        itemMoveX = '20%';
                        itemPosition = 'left';
                        break;
                    case 2:
                        itemMoveX = '50%';
                        itemPosition = 'middle';
                        break;
                    case 3:
                        itemMoveX = '80%';
                        itemPosition = 'right';
                        break;
                }
                if (Math.floor(Math.random()*100) <= 60) {
                    $('.game').append('<img id="item_'+ gameItemId +'" class="game-item bad '+ itemPosition +'" src="images/game_item_bad'+ randomBadType +'.png" alt="" />');
                }else{
                    $('.game').append('<img id="item_'+ gameItemId +'" class="game-item good '+ itemPosition +'" src="images/game_item_good.png" alt="" />');
                }
                $('#item_'+gameItemId).animate({
                    'left': itemMoveX,
                    'top': '100%'
                },{
                    duration: speed,
                    easing: 'linear',
                    step: function(e) {
                        if (hitTestObject($(this), $('.boat-hit-box'))) {
                            hitObjectFun($(this));
                            $(this).remove();
                        }
                    },
                    complete: function (e) {
                        $(this).remove();
                    }
                })
            }

            // 为当前移动物体重设速度
            let newMouMoveX, newItemMoveX, newSpeed;
            function resetSpeed (type,obj){
                if (gameOverConfirm) return;
                if (type === 'mountain'){
                    newSpeed = speed - $(obj).offset().top/($(window).height()*0.8) * speed;
                    if (parseInt($(obj).attr('id')) >= 13 && parseInt($(obj).attr('id')) < 21) {
                        newMouMoveX = '-100%';
                    }else if (parseInt($(obj).attr('id')) === 6) {
                        newMouMoveX = '-70%';
                    }else {
                        newMouMoveX = '-50%';
                    }
                    if ($(obj).hasClass('left')) {
                        $(obj).stop().animate({
                            'left': newMouMoveX,
                            'top': '80%'
                        },{
                            duration: newSpeed,
                            easing: 'linear',
                            complete: function (e) {
                                $(this).remove();
                            }
                        })
                    }else{
                        $(obj).stop().animate({
                            'right': newMouMoveX,
                            'top': '80%'
                        },{
                            duration: newSpeed,
                            easing: 'linear',
                            complete: function (e) {
                                $(this).remove();
                            }
                        })
                    }
                }else{
                    newSpeed = speed - $(obj).offset().top/$(window).height() * speed;
                    if ($(obj).hasClass('left')) {
                        newItemMoveX = '20%';
                    }else if ($(obj).hasClass('middle')){
                        newItemMoveX = '50%';
                    }else{
                        newItemMoveX = '80%';
                    }
                    //console.log($(obj));
                    $(obj).stop(true).animate({
                        'left': newItemMoveX,
                        'top': '100%'
                    },{
                        duration: newSpeed,
                        easing: 'linear',
                        step: function(e) {
                            if (hitTestObject($(this), $('.boat-hit-box'))) {
                                $(this).remove();
                                hitObjectFun($(this));
                            }
                        },
                        complete: function (e) {
                            $(this).remove();
                        }
                    })
                }
            }

            // 碰撞检测成功结果
            let badTsText = ['大华银行应对汇率风险，助力企业汇率避险。','大华银行支持跨境支付，结算更加便利效率。','大华银行预测商业风险，帮助企业未雨绸缪。'];
            let goodTsText = ['东南亚货币一站式服务','中国东盟跨境资金池','贸易直通车','跨境投融资一站式账户服务','供应链融资','绿色融资及银团贷款','FDI一站式服务','贵金属交易服务'];
            let confirm = false;
            function hitObjectFun(obj) {
                if (confirm) return;
                confirm = true;
                // 吃到粽子
                if ($(obj).hasClass('good')){
                    soundSpeedUp.play();
                    speed = 2000;
                    $('.game').append('<div class="ts-text-box" style="top: '+ (10+Math.random()*15) +'%">'+ goodTsText[Math.floor(Math.random()*8)] +'</div>');
                    $('.boat').addClass('fast-type');
                    for (let i=0;i<$('.game_move_mountain').length;i++) {
                        resetSpeed ('mountain',$('.game_move_mountain').eq(i));
                    }
                    for (let j=0;j<$('.game-item').length;j++) {
                        resetSpeed ('item',$('.game-item').eq(j));
                    }
                    setTimeout(function () {
                        speed = 3000;
                        $('.boat').removeClass('fast-type');
                        for (let i=0;i<$('.game_move_mountain').length;i++) {
                            resetSpeed ('mountain',$('.game_move_mountain').eq(i));
                        }
                        for (let j=0;j<$('.game-item').length;j++) {
                            resetSpeed ('item',$('.game-item').eq(j));
                        }
                        confirm = false;
                    },Math.random()*500+1000);
                }
                // 碰到石头
                if ($(obj).hasClass('bad')) {
                    soundHit.play();
                    speed = 8000;
                    $('.game').append('<div class="ts-text-box" style="top: '+ (10+Math.random()*15) +'%">'+ badTsText[Math.floor(Math.random()*3)] +'</div>');
                    $('.boat').addClass('swing');
                    $('.boat').addClass('slow-type');
                    for (let i=0;i<$('.game_move_mountain').length;i++) {
                        resetSpeed ('mountain',$('.game_move_mountain').eq(i));
                    }
                    for (let j=0;j<$('.game-item').length;j++) {
                        resetSpeed ('item',$('.game-item').eq(j));
                    }
                    setTimeout(function () {
                        speed = 3000;
                        $('.boat').removeClass('swing');
                        $('.boat').removeClass('slow-type');
                        for (let i=0;i<$('.game_move_mountain').length;i++) {
                            resetSpeed ('mountain',$('.game_move_mountain').eq(i));
                        }
                        for (let j=0;j<$('.game-item').length;j++) {
                            resetSpeed ('item',$('.game-item').eq(j));
                        }
                        confirm = false;
                    },Math.random()*500+1000);
                }
            }

            // 游戏进行
            let getTime = 0, itemId = 0, speed = 3000;
            function gameRound() {
                getTime ++;
                if (getTime === 1){
                    addMountainItem('left');
                }
                if (getTime%(speed/50) === 0) {
                    addMountainItem('left');
                }
                if (getTime%(speed/40) === 0) {
                    addGameItem();
                }
            }

            // 游戏初始化
            let gameStartTimer, gameStartTimerNum = 3;
            function gameInit() {
                startMove = false;
                itemId = 0;
                gameItemId = 0;
                getTime = 0;
                speed = 3000;
                $('.game-item').remove();
                $('.game_move_mountain').remove();
                $('.ts-text-box').remove();
                $('.timer-box').html('00:00');
                $('#gameStartTimer').removeClass('one two');
                $('#gameStartTimer').addClass('three');
                $('.finish').removeAttr('style');
                $('.country-label').removeClass('yin');
                document.body.addEventListener('touchstart',touchStart, {passive: false});
                document.body.addEventListener('touchend',touchEnd, {passive: false});
                document.body.addEventListener('touchmove',touchMove, {passive: false});

                $('#gameStartTimer').show();
                gameStartTimer = setInterval(function () {
                    gameStartTimerNum --;
                    if (gameStartTimerNum == 0) {
                        $('.pop-bg').removeClass('show');
                        $('#gameStartTimer').hide();
                        $('.game-start-cloud').removeClass('slideInRight');
                        $('.game-start-cloud').addClass('slideOutLeft');
                        $('.country-label').show();
                        gameStartTimerNum = 3;
                        clearInterval(gameStartTimer);
                        $('.boat').removeClass('wait slideInUp');
                        //start();

                        startTime = performance.now();
                        tick();
                        return;
                    }else if (gameStartTimerNum == 2) {
                        $('#gameStartTimer').addClass('two');
                    } else {
                        $('#gameStartTimer').addClass('one');
                    }
                },1000);
            }

            let gameRankConfirm = false;
            $('#popRank').click(function () {
                $('#rank').show();
                gameRankConfirm = true;
            })

            $('#popConfirm').click(function () {
                $('.pop-bg').removeClass('show');
                $('.pop-box').hide();
                $('.game').hide();
                $('#res').show();
            })

            $('#popGoLast').click(function () {
                $('.pop-bg').removeClass('show');
                $('.pop-box').hide();
                $('.game').hide();
                $('#res').show();
            })

            $('#popPlayAgain').click(function () {
                $('#failed').hide();
                gameInit();
            })

            $('#tips').click(function () {
                $('#tips').hide();
                gameInit();
            })

            // 游戏控制相关start
            let touchX;
            let boatCenter = $('.boat').width()/4;
            function touchMove (e) {
                e.preventDefault();
                if (startMove) {
                    if (e.touches[0].pageX <= 0+boatCenter) {
                        touchX = 0+boatCenter;
                    }else if (e.touches[0].pageX >= $(window).width()-boatCenter){
                        touchX = $(window).width()-boatCenter;
                    }else {
                        touchX = e.touches[0].pageX;
                    }
                    $('.boat').css({
                        left: touchX
                    })
                }
            }

            let startMove = false;
            function touchStart (e) {
                e.preventDefault();
                if ($(e.target).hasClass('boat') || e.target.className == 'boat-hit-box') {
                    startMove = true;
                }
            }

            function touchEnd (e) {
                e.preventDefault();
                startMove = false;
            }
            // 游戏控制相关end

            // 碰撞检测
            function hitTestObject(item,hitObj){
                if(item == null || hitObj == null) return;
                let itemTop = item.offset().top,
                    itemFoot = item.offset().top + parseInt(item.height()),
                    itemLeft = item.offset().left,
                    itemRight = item.offset().left + parseInt(item.width());
                let hitTop = hitObj.offset().top,
                    hitFoot = hitObj.offset().top + parseInt(hitObj.height()),
                    hitLeft = hitObj.offset().left,
                    hitRight = hitObj.offset().left + parseInt(hitObj.width());
                if(itemFoot > hitTop && itemRight > hitLeft && itemTop < hitFoot && itemLeft < hitRight){
                    return true;
                }
            }
            // 游戏相关end

            // 首页
            function closePop(){
                $('.pop-bg').removeClass('show');
                $('.pop-box').hide();
            }

            $('.rank-close').click(function (e) {
                if (gameRankConfirm) {
                    $('#rank').hide();
                    gameRankConfirm = false;
                    return;
                }
                closePop();
            })

            $('.pop-close').click(function (e) {
                if (gameRankConfirm) {
                    $('#rank').hide();
                    gameRankConfirm = false;
                    return;
                }
                closePop();
            })

            $('.rank-btn').click(function (e) {
                $('.pop-bg').addClass('show');
                $('#rank').show();
            })

            $('#ruleClose').click(function (e) {
                $('#notice').prop('checked', true);
            })

            $('.pop-confirm-btn').click(function (e) {
                closePop();
            })

            $('.index-notice').click(function (e) {
                $('.pop-bg').addClass('show');
                $('#rule').show();
            })

            $('#noticePop').click(function (e) {
                closePop();
            })

            $('.index-game-btn').click(function (e) {
                if (!$('#notice').is(':checked')) {
                    $('.pop-bg').addClass('show');
                    $('#noticePop').show();
                    return;
                }
                $('#index').hide();
                $('.game').show();
                $('.game-start-cloud').show();
                setTimeout(function () {
                    setTimeout(function () {
                        $('.boat').show();
                        setTimeout(function () {
                            $('.pop-bg').addClass('show');
                            $('#tips').show();
                        },500);
                    },500);
                },500);
            })
        </script>
	</body>
</html>
